<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品添加</title>

    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">
    <script src="../../../backstage/js/jquery.min.js"></script>
    <script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>
</head>

<body>
<div class="x-nav">
    <span class="layui-icon-help">
        <a >带*为必填项</a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <form id="addItem" class="layui-form layui-form-pane"  enctype="multipart/form-data">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <input type="hidden" name="id" value="{$art.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>商品类别
                        </label>
                        <div class="layui-input-block">
                            <select name="category_id" id="category_id">
                                <option value="">---请选择商品类别---</option>
                                <option value="医疗险">医疗险</option>
                                <option value="意外险">意外险</option>
                                <option value="责任险">责任险</option>
                                <option value="综合险">综合险</option>
                                <option value="健康险">健康险</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>商品名称
                        </label>
                        <div class="layui-input-block">
                            <input id="itemName" type="text" name="itemName" required="" lay-verify="required"autocomplete="off" class="layui-input-add" maxlength="20" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>生效对象
                        </label>
                        <div class="layui-input-block">
                            <input id="subject" type="text" name="subject" required="" lay-verify="required" autocomplete="off" class="layui-input-add" maxlength="20">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>何时生效
                        </label>
                        <div class="layui-input-block">
                            <input id="whenEffect" type="text" name="whenEffect" required=""
                                   lay-verify="required" autocomplete="off" class="layui-input-add" maxlength="10" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>生效时长(天)
                        </label>
                        <div class="layui-input-block">
                            <input id="howLong" type="number" name="howLong" required="" lay-verify="required" autocomplete="off" class="layui-input-add"
                                   oninput = "if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>价格(元)
                        </label>
                        <div class="layui-input-block">
                            <input id="price" type="number" name="price" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input-add"
                                   oninput = "if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>状态
                        </label>
                        <div class="layui-input-inline" id="state" >
                            <input type="radio"  name="state" value="有效" title="有效"  checked/>
                            <input type="radio"  name="state" value="无效" title="无效" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>积分
                        </label>
                        <div class="layui-input-block">
                            <input id="credit" type="number" name="credit"  required="" lay-verify="required" autocomplete="off" class="layui-input-add"  oninput="if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>描述
                        </label>
                        <div class="layui-input-block">
                            <textarea id="description"  name="description" required=""
                                    class="layui-input-add"  maxlength="100"
                                   style="height:100px;" >
                                </textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>使用说明
                        </label>
                        <div class="layui-input-block">
                            <input id="howUse" type="text" name="howUse" required="" lay-verify="required" autocomplete="off" class="layui-input-add" maxlength="30">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'></span>备注
                        </label>
                        <div class="layui-input-block">
                            <input id="remark" type="text" name="remark" autocomplete="off" class="layui-input-add" maxlength="30"  >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>商品缩略图
                        </label>
                        <div class="layui-input-inline" >
                            <div class="site-demo-upbar">
                                <div class=" layui-upload-button" style="border:#FFFFFF ;">
                                    <button type="button" class="layui-btn" id="test1">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                    <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="images"
                                           onchange="upload(this.files)">
                                    <%--从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，
                                    只需要在<input type="file">里添加multiple或multiple="multiple"属性。--%>
                                    <%--</div>--%>
                                </div>
                            </div>
                            <div class="layui-input-inline" id="img">
                            <img src="#" id="img3" name="img3" style="width:400px;height:200px;"  />
                            </div>
                        </div>
                    </div>

                    <script>
                        function getobj(obj) {
                            return document.getElementById(obj);
                        }
                        var f=$("#previewImg")[0].files[0];
                        if(document.getElementById('previewImg')){

                            function upload(f) {
                                var str = "";
                                for (var i = 0; i < f.length; i++) {
                                    var reader = new FileReader();
                                    reader.readAsDataURL(f[i]);
                                    reader.onload = function (e) {
                                        str += '<img src="' + e.target.result + '" id="img3" width="130px" height="130px"/>';
                                        getobj("img").innerHTML = str;
                                    }
                                }
                            }
                        }
                    </script>
                    <div class="layui-form-item">
                        <input id="add" type="button" class="layui-btn"  lay-submit="add" value="添加">  </input>
                    </div>
                    <div style="height:100px;"></div>
                </div>

            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['laydate', 'element', 'layer', 'form'], function() {
        $ = layui.jquery;   //jquery
        laydate = layui.laydate;    //日期插件
        lement = layui.element();   //面包导航
        var layer = layui.layer;    //弹出层
        var form = layui.form();

        var start = {
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istoday: false,
            choose: function(datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
            }
        };

        //自定义验证规则
        form.verify({
            itemName: function(value){
                if(value.length<=0){
                    return '商品名不能为空';
                }
            }
        });
        form.verify({
            subject: function(value){
                if(value.length<=0){
                    return '生效对象不能为空';
                }
            }
        });
        form.verify({
            howLong: function(value){
                if(value.length<=0){
                    return '使用时长不能为空';
                }
            }
        });
        form.verify({
            whenEffect: function(value){
                if(value.length<=0){
                    return '何时生效不能为空';
                }
            }
        });
        form.verify({
            price: function(value){
                if(value.length<=0){
                    return '价格不能为空';
                }
            }
        });
        form.verify({
            credit: function(value){
                if(value.length<=0){
                    return '积分不能为空';
                }
            }
        });
        form.verify({
            description: function(value){
                if(value.length<=0){
                    return '描述不能为空';
                }
            }
        });
        form.verify({
            howUse: function(value){
                if(value.length<=0){
                    return '如何使用不能为空';
                }
            }
        });

        $("#add").click(function () {

            var type = $.trim($('#category_id option:selected') .val());//所属商品类型
            var itemName = $.trim($("#itemName").val());
            var state= $.trim($('#state input:checked').val());
            var subject = $.trim($("#subject").val());
            var howLong = $.trim($("#howLong").val());
            var whenEffect= $.trim($("#whenEffect").val());
            var price = $.trim($("#price").val());
            var credit = $.trim($("#credit").val());
            var remark = $.trim($("#remark").val());
            var description = $.trim($("#description").val());
            var howUse = $.trim($("#howUse").val());

            if($("#previewImg").val()==""){
                layer.msg('请上传图片',{icon:5,time:2000});
               return false;
            }

            var s = $('#previewImg')[0].files[0];

            var formData = new FormData();
            // 服务端要求参数
            formData.append("file", s);
            formData.append("type",type);
            formData.append("subject",subject);
            formData.append("itemName",itemName);
            formData.append("state",state);
            formData.append("howLong",howLong);
            formData.append("price",price);
            formData.append("credit",credit);
            formData.append("remark",remark);
            formData.append("description",description);
            formData.append("whenEffect",whenEffect);
            formData.append("howUse",howUse);

            var filename= s.name;
            console.log(s.name);
            console.log(filename);
            console.log(formData.get('file'));
            console.log(formData.get('type'));
            $("#avatar").val(img.src);
            //图片

            if (!filename.match(/.jpg|.JPG|.png|.bmp|.jpeg/i)) {　　//判断所选文件格式
                return alert("上传的图片格式不正确，请重新选择");
            }

            if (type==""){
                layer.msg('请选择类别',{icon:5,time:2000});
                return false;
            }
            if (itemName==""){
                layer.msg('商品名不能为空',{icon:5,time:2000});
                return false;
            }
            if (subject==""){
                layer.msg('对象不能为空',{icon:5,time:2000});
                return false;
            }
            if (howLong==""){
                layer.msg('使用时长不能为空',{icon:5,time:2000});
                return false;
            }
            if (whenEffect==""){
                layer.msg('何时生效不能为空',{icon:5,time:2000});
                return false;
            }
            if (price==""){
                layer.msg('价格不能为空',{icon:5,time:2000});
                return false;
            }
            if (credit==""){
                layer.msg('积分不能为空',{icon:5,time:2000});
                return false;
            }
            if (description==""){
                layer.msg('描述不能为空',{icon:5,time:2000});
                return false;
            }
            if (howUse==""){
                layer.msg('使用方式不能为空',{icon:5,time:2000});
                return false;
            }
            $.ajax({
                type:'POST',
                url:'/item/insert',
                data:formData ,
                dataType:"json",
                //cache: false,      //cache设置为false，上传文件不需要缓存。
                processData: false,     //processData设置为false。因为data值是FormData对 象，不需要对数据做处理
                contentType: false,
                error: function () {
                    alert("失败");
                },
                success:function(data) {
                    console.log(data);
                    if (data.msg == "插入成功") {
                        alert("添加成功");
                    } else if (data.msg == "插入失败") {
                        alert("插入失败");
                    } else if (data.msg == "文件格式不正确，仅支持.jpg/.jpeg/.png格式上传") {
                        alert("文件格式不正确，仅支持.jpg/.jpeg/.png格式上传")
                    }
                    location.reload();
                }

            });
         });

    })
</script>
</body>
</html>